<template>
	<view class="container">
		<topView @pickerlan="pickerlan"></topView>
		<view class="main-container">
			<view class="main-top-container">
				<view class="main-title">{{$t('language.pageTitle')}}</view>
				<view class="search-container">
					<view style="display: flex;flex-direction: row;align-items: center;flex: 1;">
						<image class="search-image" src="../../static/icon_search.png"></image>
						<input class="uni-input search-text" v-model="orderCode" focus :placeholder="$t('language.placehold')" />
					</view>
					<view class="search-button" @click="search">{{$t('language.search')}}</view>
				</view>
			</view>
			<view class="charge-title">{{$t('language.text1')}}</view>
			<view class="charge-tips">{{$t('language.text2')}}</view>
			<view class="item-container">
				<view class="item" @click="buy(item)" v-for="(item,index) in goodList" :key="index">
					<image class="item-image" :src="$imgUrl+item.goods_img"></image>
					<view class="item-text">{{item.goods_name}}</view>
				</view>
			</view>
			<view class="contact" @click="contact">{{$t('language.kefu')}}</view>
		</view>
		<view class="copy-right-container">Copyright 2020 {{$t('language.mayi')}}</view>
		<view class="copy-right-container" @click="jumpWeb('https://beian.miit.gov.cn')">{{$t('language.beian')}}</view>
		<view class="mask" v-if="showCopy">
			<view class="copy-container">
				<view class="copy-top-container">
					<view class="copy-top-title">{{$t('language.kamihao')}}</view>
					<image @click="dismissCopy" class="copy-close" src="../../static/icon_close.png"></image>
				</view>
				<view class="copy-other-container">
					<view class="copy-title-container" v-if="carmyList.length>0">
						<view v-for="(item,i) in carmyList" :key="i" class="copy-title-item">
							<view class="copy-title">{{item.carmy}}</view>
							<view class="copy-button" @click.stop="copySuccess(item.carmy)"><view class="copy-divider"></view>复制</view>
						</view>
					</view>
					<view class="copy-title-container" v-else>
						{{$t('language.wujilu')}}
					</view>
					<view class="copy-close-button" @click="dismissCopy">{{$t('language.quxiao')}}</view>
				</view>
			</view>
		</view>
		<view class="mask" v-if="showContact">
			<view class="contact-container">
				<view class="contact-top-container">
					<view class="contact-top-title">联系客服</view>
					<image @click="dismissContact" class="contact-close" src="../../static/icon_close.png"></image>
				</view>
				<view class="contact-item-container" style="margin-top: 48rpx;">
					<view class="contact-item-title">QQ：</view>
					<view class="contact-item-value">{{kefuInfo.qq_qq}}</view>
				</view>
				<view class="contact-item-container">
					<view class="contact-item-title">Q群：</view>
					<view class="contact-item-value">{{kefuInfo.qq_qu}}</view>
				</view>
				<view class="contact-item-container">
					<view class="contact-item-title">投诉举报电话：</view>
					<view class="contact-item-value">{{kefuInfo.tel}}</view>
				</view>
				<view class="copy-close-button" style="margin-top: 80rpx;margin-left: 404rpx;" @click="dismissContact">
					关闭</view>
			</view>
		</view>
	</view>
</template>

<script>
	import topView from '@/components/topView/topView.vue'
	export default {
		data() {
			return {
				orderCode: '',
				carmyList: [],
				goodList: [],
				showCopy: false,
				showContact: false,
				kefuInfo: {},
				chooselan:0
			}
		},
		async onLoad() {
			this.querykfInfo()
			this.getgoodsList()
		},
		methods: {
			buy(data) {
				uni.navigateTo({
					url: '/pages/step-one/step-one?goodObj=' + JSON.stringify(data)
				})
			},
			jumpWeb(url){
				uni.navigateTo({
					url: '/pages/webview/webview?url='+url
				})
			},
			search() {
				this.$http.post('order.getCarmy', {
					order_code: this.orderCode,
					lang:window.sessionStorage.getItem('lang') || 'cn'
				}).then(res => {
					this.carmyList = res.data.cary
					this.showCopy = true
				}).catch(e => {})
			},
			getgoodsList(){
				this.$http.post('order.goodsList',{lang:window.sessionStorage.getItem('lang') || 'cn'}).then(res => {
					this.goodList = res.data
				}).catch(e => {})
			},
			querykfInfo() {
				this.$http.post('order.info',{
					lang:window.sessionStorage.getItem('lang') || 'cn'
				}).then(res => {
					this.kefuInfo = res.data
				}).catch(e => {})
			},
			pickerlan(i){
				var lan=i>0?'en':'cn'
				this.$i18n.locale = lan //this.$i18n的local进行语言切换
				window.sessionStorage.setItem('lang', lan)
				setTimeout(()=>{
					this.querykfInfo()
					this.getgoodsList()
				})
				
			},
			dismissCopy() {
				this.showCopy = false
			},
			contact() {
				this.showContact = true
			},
			dismissContact() {
				this.showContact = false
			},
			copySuccess(context) {
				this.showCopy = false
				// 创建输入框元素
				let oInput = document.createElement('input');
				// 将想要复制的值
				oInput.value = context;
				// 页面底部追加输入框
				document.body.appendChild(oInput);
				// 选中输入框
				oInput.select();
				// 执行浏览器复制命令
				document.execCommand('Copy');
				// 弹出复制成功信息
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				})
				this.orderCode = ''
				// 复制后移除输入框
				oInput.remove();
			}
		},
		components: {
			topView
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background: #F0F2F5
	}

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	.main-container {
		width: 1820rpx;
		height: 1192rpx;
		margin-top: 40rpx;
		background: #FFFFFF;
		border-radius: 4rpx;
	}

	.main-top-container {
		width: 1820rpx;
		height: 334rpx;
		background-image: url('https://newydxs.oss-cn-beijing.aliyuncs.com/bg_top_pc.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.main-title {
		font-size: 60rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		margin-top: 64rpx;
	}

	.search-container {
		width: 892rpx;
		height: 90rpx;
		background: #FFFFFF;
		border-radius: 45rpx;
		margin-bottom: 48rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.search-image {
		margin-left: 40rpx;
		width: 28rpx;
		height: 28rpx;
	}

	.search-text {
		width: 100%;
		margin-left: 10rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.search-button {
		width: 168rpx;
		height: 78rpx;
		background: rgb(65, 133, 255, 0.2);
		border-radius: 39rpx;
		margin-right: 6rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #4185FF;
	}

	.charge-title {
		font-size: 48rpx;
		margin-top: 112rpx;
		width: 100%;
		text-align: center;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.charge-tips {
		margin-top: 8rpx;
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		width: 100%;
		text-align: center;
	}

	.item-container {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 1100rpx;
		margin:64rpx auto;
		height: 324rpx;
		background: #F8F8F8;
	}

	.item {
		flex: 1;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.item-image {
		width: 128rpx;
		height: 128rpx;
	}

	.item-text {
		margin-top: 32rpx;
		font-size: 34rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.contact {
		font-size: 26rpx;
		margin-top: 184rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		width: 100%;
		text-align: center;
	}

	.copy-right-container {
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.4500);
		padding-top: 48rpx;
		&:nth-last-child(1){
			height: 136rpx;
		}
	}

	.mask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.copy-container {
		width: 1000rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.copy-top-container {
		width: 1000rpx;
		height: 120rpx;
		background: #FAFAFA;
		box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.1000);
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.copy-top-title {
		font-size: 40rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		margin-left: 48rpx;
	}

	.copy-close {
		width: 36rpx;
		height: 36rpx;
		margin-right: 48rpx;
	}

	.copy-other-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		width: 1000rpx;
	}

	.copy-title-container {
		height: 360rpx;
		margin: 10rpx 0 30rpx;
		overflow-y: scroll;
	}

	.copy-title-container::-webkit-scrollbar {
		//设置滚动条宽高
		width: 8px;
		height: 8px
	}

	.copy-title-container::-webkit-scrollbar-track {
		// 滚动条轨道样式
		-webhit-box-shadow: inset 0 0 5px transparent;
		border-radius: 0;
		background: transparent;
	}

	.copy-title-container::-webkit-scrollbar-thumb {
		//滚动条样式
		border-radius: 5px;
		-webkit-box-shadow: inset 0 0 5px #242B56;
		background: #242B56;
	}

	.copy-title-item {
		display: flex;
		justify-content: space-between;
		line-height: 60rpx;
		align-items: center;
		min-width: 400rpx;
		padding: 0 30rpx;
	}

	.copy-title {
		font-size: 44rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #222222;
		flex: 1;
	}

	.copy-divider {
		margin-left: 30rpx;
		margin-right: 30rpx;
		width: 1rpx;
		height: 30rpx;
		background: #CCCCCC;
		display: inline-block;
	}

	.copy-button {
		font-size: 44rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #4185FF;
		cursor: pointer;
	}

	.copy-close-button {
		width: 192rpx;
		height: 80rpx;
		background: #4185FF;
		border-radius: 4rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		margin-bottom: 48rpx;
	}

	.contact-container {
		width: 1000rpx;
		height: 572rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.contact-top-container {
		width: 1000rpx;
		height: 120rpx;
		background: #FAFAFA;
		box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.1000);
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.contact-top-title {
		font-size: 40rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		margin-left: 48rpx;
	}

	.contact-close {
		width: 36rpx;
		height: 36rpx;
		margin-right: 48rpx;
	}

	.contact-item-container {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 32rpx;
		justify-content: space-between;
	}

	.contact-item-title {
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-left: 64rpx;
	}

	.contact-item-value {
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #222222;
		margin-right: 64rpx;
	}
</style>
